<template>
  <div class="w-full flex flex-col -mt-46 h-[100vh]">
    <div
      class="bg-no-repeat bg-size-[100%] backdrop-blur-[10px] flex items-center justify-center h-0 relative flex-grow-1"
    >
      <video
        class="w-full object-cover"
        :class="
          direction == ORIENTATION_ENUM.VER
            ? 'h-full'
            : direction == ORIENTATION_ENUM.HOR
              ? 'h-211'
              : 'h-375'
        "
        :src="templateInfoParam.videoUrl"
        :poster="templateInfoParam.cover"
        :autoplay="true"
        :controls="false"
        :muted="true"
        :loop="true"
      />
    </div>
    <div class="py-15 pt-12 text-black">
      <ButtonFooter button-text="创作视频" @confirm="confirmCreateVideo" />
      <div class="flex items-center justify-center text-999999 h-28">
        <svg-icon name="icon-banquan" :size="12" color="#999" />
        <div class="pl-5 text-10">本产品数字人可商用</div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import setPageTitle from "@/utils/set-page-title";
import { useRoute } from "vue-router";
import { saveLog, templateInfo, TemplateInfoData } from "@/api/TempleVideo";
import { HUMAN_TYPE_ENUM, ORIENTATION_ENUM } from "@/enums";
import { navigateTo } from "@/utils";
defineOptions({
  name: "TempleVideo"
});
const route = useRoute();
// 直接使用计算属性获取参数
const receivedId = ref(route.params.id as string);
const receivedName = ref(route.params.name as string);
// 更新页面标题（仅设置浏览器标签）
const updatePageTitle = () => {
  if (receivedName.value) {
    setPageTitle(receivedName.value);
  }
};
// 添加加载状态
const loading = ref(false);
// 模板信息
const templateInfoParam = ref<TemplateInfoData>({
  timbreInfoVo: undefined,
  humanId: "",
  humanImageUrl: "",
  humanTaskFailMessage: "",
  humanTaskStatus: "",
  humanImgHigh: 0,
  humanImgWidth: 0,
  humanType: 0,
  cover: "",
  id: "",
  videoUrl: "",
  composeType: 0
});
// 获取数字人图片方向
let direction = ref<number | null>(null);
// 修改模板请求接口，支持分页
const templateInfoPort = async (pageNo = 1) => {
  loading.value = true;
  try {
    const templateRequestParam = {
      id: receivedId.value
    };
    templateInfoParam.value = await templateInfo(templateRequestParam);
    direction.value =
      templateInfoParam.value.humanImgHigh >
      templateInfoParam.value.humanImgWidth
        ? ORIENTATION_ENUM.VER
        : templateInfoParam.value.humanImgHigh <
            templateInfoParam.value.humanImgWidth
          ? ORIENTATION_ENUM.HOR
          : null;
    //2d数字人横竖屏取决于composeType
    if (templateInfoParam.value.humanType == HUMAN_TYPE_ENUM.NORMAL) {
      direction.value = templateInfoParam.value.composeType;
    }
  } finally {
    loading.value = false;
  }
};

// 确认创建视频
const confirmCreateVideo = async () => {
  const param = {
    eventType: "TEMPLATE_CLICK",
    relatedId: receivedId.value
  };
  await saveLog(param);
  // 清除目标页面缓存
  await navigateTo("CreatePictureVideo", { id: receivedId.value }, true);
};

// 监听路由参数变化
watch(
  () => route.params,
  newParams => {
    if (newParams.name) {
      receivedName.value = newParams.name as string;
      updatePageTitle();
    }
    if (newParams.id) {
      receivedId.value = newParams.id as string;
      templateInfoPort();
    }
  },
  { immediate: true }
);
onMounted(() => {
  // 确保初始加载时也设置标题
  if (receivedName.value) {
    updatePageTitle();
  }
});
</script>
<style scoped></style>
